import path, { dirname } from "path";
import { fileURLToPath } from "url";
import { merge } from "webpack-merge";
import base from "./webpack.base.js";
import { CleanWebpackPlugin } from "clean-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const clientConfig = {
  entry: "./src/client",
  output: {
    path: path.resolve(__dirname, "./public"),
    filename: "js/bundle.[hash:5].js",
    publicPath: '/'
  },
  plugins: [ 
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['**/*', '!favicon.ico']
    }),
    new MiniCssExtractPlugin({
      filename: "css/bundle[hash:5].css"
    }) 
  ],
  module:{
    rules: [
      {
        test: /\.css$/,
        use: [ MiniCssExtractPlugin.loader, "css-loader?modules"]
      },
      {
        test: /\.(jpg)|(png)|(gif)$/,
        use: [{
          loader: "file-loader",
          options: {
            name: "img/[name].[hash:5].[ext]"
          }
        }]
      }
    ]
  }
};

export default merge(base, clientConfig);
